import React, {Component, Fragment} from 'react';
import TodoItem from './TodoItem'
import './style.css';
import Test from './Test'
import Animate from './Animate'
import axios from 'axios'
class TodoList extends Component{
    /*
        1，当props和state发生改变时，render函数就会执行
        2，当父组件的render被执行时，子组件的render也会被重新执行一次
    */ 
    constructor(props){
        super(props);
        this.state = {
            inputValue: '',
            list: []
        }
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleBtnClick = this.handleBtnClick.bind(this);
        this.handleItemDelete = this.handleItemDelete.bind(this);
    }
    // 在组件即将被挂载到页面的时刻自动执行
    componentWillMount(){}
    render(){
        console.log('render')
        return (
            <Fragment>
                <div>
                    <label htmlFor="insert">输入内容</label>
                    <input 
                        id='insert' 
                        className='input' 
                        value={this.state.inputValue} 
                        ref={(input) => {
                            this.input = input
                        }}
                        onChange={this.handleInputChange}/>
                    <button onClick={this.handleBtnClick}>按钮</button>
                </div>
                <ul>
                    {this.todoList()}
                </ul>
                <Test content={this.state.inputValue}/>
                <Animate></Animate>
            </Fragment>
        )
    }
    // 组件被挂载到页面之后，自动被执行，常用于发送ajax
    componentDidMount () {
        axios.get('/api/todolist').then((res) => {
            this.setState(() => {
                return {
                    list: res.data
                }
            })
        }).catch(() => {
            // alert('error')
        })
    }
    // 组件被更新之前，他会自动执行 返回true会被更新，返回false不会被执行
    
    // 组件被更新之前会自动执行，但是他在shouldComponentUpdate之后
    // 如果shouComponentUpdate返回true会执行，返回false不会执行
    componentWillUpdate () {}
    componentDidUpdate () {}
    // 当组件即将从页面剔除的时候，被执行
    componentWillUnmount () {}
    todoList () {
        return this.state.list.map((item, index) => {
            return (
                <TodoItem 
                    content={item} 
                    index={index}
                    deleteItem={this.handleItemDelete} 
                    key={index}
                ></TodoItem>
            )
        })
    }
    handleItemDelete(index){
        // immutable state 不允许我们做任何操作，可以操作state数据的副本

        this.setState((prevState) => {
            const list = [...prevState.list]
            list.splice(index, 1);
            return {
                list: list
            }
        })
        // this.setState({
        //     list: list
        // })
    }
    handleBtnClick(e){
        this.setState((prevState) => {
            return {
                list: [...prevState.list, prevState.inputValue],
                inputValue: ''
            }
        })

        // this.setState({   异步函数
        //     list: [...this.state.list, this.state.inputValue],
        //     inputValue: ''
        // })
    
    }
    handleInputChange(e){
        // react16
        const value = this.input.value
        this.setState(() => {
            return {
                inputValue: value
            }
        })

        // this.setState({
        //     inputValue: e.target.value
        // })
    }
}
export default TodoList;

/*
    <li onClick={this.handleItemDelete.bind(this, index)} key={index} 
        dangerouslySetInnerHTML={{__html: item}}>
    </li>

    jQuery 是命令式的代码
    React 声明式开发
    组件化
    单向数据流，只允许父组件向子组件传递数据，
    不允许子组件修改父组件传递的数据

    视图层框架 数据层框架Flux Redux
    函数式编程
*/ 